<template>
  <div class="transitionContainer">
    <!-- <digitalBiTwo /> -->
    <transition :name="transitionName">
      <component :is="currentPageComponent" :key="currentPage" class="page" />
    </transition>
  </div>
</template>

<script>
import receiveScreenOne from "@/components/digitalSignage/receiveScreenOne";
import digitalBiOne from "@/components/digitalSignage/digitalBiOne";
import receiveScreenTwo from "@/components/digitalSignage/receiveScreenTwo";
import digitalBiTwo from "@/components/digitalSignage/digitalBiTwo";
import receiveScreenThree from "@/components/digitalSignage/receiveScreenThree";
import digitalBiThree from "@/components/digitalSignage/digitalBiThree";

export default {
  components: {
    receiveScreenOne,
    digitalBiOne,
    receiveScreenTwo,
    digitalBiTwo,
    receiveScreenThree,
    digitalBiThree,
  },
  data() {
    return {
      currentPage: 0,
      transitionName: "slide-left",
      intervalId: null,
      pageComponents: [
        receiveScreenOne,
        digitalBiOne,
        receiveScreenTwo,
        digitalBiTwo,
        receiveScreenThree,
        digitalBiThree,
      ], // 可以扩展为更多页面组件
    };
  },
  computed: {
    currentPageComponent() {
      return this.pageComponents[this.currentPage];
    },
  },
  created() {
    this.startPageSwitching();
  },
  beforeDestroy() {
    this.stopPageSwitching();
    
  },
  methods: {
    startPageSwitching() {
      this.intervalId = setInterval(this.switchPage, 60000); // 每30秒切换一次
    },
    stopPageSwitching() {
      clearInterval(this.intervalId);
    },
    switchPage() {
      this.currentPage = (this.currentPage + 1) % this.pageComponents.length;
    },
  },
};
</script>

<style scoped>
.transitionContainer {
  position: relative;
}
.page {
  width: 100%;
  position: absolute;
}
/* 动画效果 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.5s ease-out;
}
.slide-left-enter-from {
  transform: translateX(0);
}
.slide-left-enter {
  transform: translateX(100%);
}
</style>